<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>角色列表</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<style>
			body {
				background-color: #fff;
			}
			
			.table {
				margin: 0 20px;
			}
			
			.table table {
				border: none
			}
			
			.table table>thead {
				border: 1px solid #ddd
			}
		</style>
	</head>

	<body>
		<div class="table">
			<input type="hidden" value="" id="pageNo" />
			<div class="tablelist">
				<table>
					<thead>
						<tr>
							<th>姓名</th>
							<th>账号</th>
							<th>电话</th>
							<th>所属公司</th>
						</tr>
					</thead>
					<tbody id="itemContainer">
						<tr>
							<td>
								张三
							</td>
							<td>
								zhangsan
							</td>
							<td>
								18689523569
							</td>
							<td>
								深圳在乎传媒科技有限公司
							</td>
						</tr>

						<tr>
							<td>
								张三
							</td>
							<td>
								zhangsan
							</td>
							<td>
								18689523569
							</td>
							<td>
								深圳在乎传媒科技有限公司
							</td>
						</tr>

						<tr>
							<td>
								张三
							</td>
							<td>
								zhangsan
							</td>
							<td>
								18689523569
							</td>
							<td>
								深圳在乎传媒科技有限公司
							</td>
						</tr>

					</tbody>
				</table>
			</div>

			<div class="pagelist fr">
				<div class=" pagedesc fl">当前<span class="currentPage"></span>/<span class="totalpage"></span>，每页<span class="perpage"></span>条，共<span class="totalnumber"></span>条</div>
				<div class="pagination inline-block fl"></div>
				<div class="inline-block fl">
					到第<input type="text" value="" class="gotopage" />页 <input type="button" value="跳转" class="search-input-button border-radius bgblue gotopage_button"></span>
				</div>
			</div>

		</div>
	</body>

	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/jPages.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/pageFun.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(function() {
		     listObj.pageinit(1, 10, 50);
		})
		
		//分页提交 
        function submitFun(currentPage){
        	
        }
        
		
		var listObj={
			'pageinit': function(currentpage, perPage, totalNumber) {
				var pageObj = new pageFun();
				pageObj.pageNoObj = $('#pageNo');
				pageObj.submitFun = function() {
					var currentPage = pageObj.pageNoObj.val(); //这个是当前页的页码
					submitFun(currentPage);
				}
				/*参数每页多少个,当前页,总个数,容器的ID*/
				pageObj.init(perPage, currentpage, totalNumber, 'itemContainer');
			},
		}
	</script>

</html>